<template>
    <div @click="onClick">
        <div class="tab_bar_item_icon">
            <slot v-if="isShow" name="icon_active"></slot>
            <slot v-else name="icon"></slot>
        </div>
        <div :class="isShow?'tab_bar_item_title_active':'tab_bar_item_title'">
            <slot name="title"></slot>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        path:{//接收父组件传过来的数据
            type:String,//接收类型为字符串类型
            required:true//必传项
        }
    },
    computed: {//计算属性
        isShow:function(){
            return this.$route.path === this.path;
        }
    },
    methods: {
        onClick(){//点击切换页面
            this.$router.push(this.path);
        }
    },
}
</script>
<style lang="scss" scoped>
    .tab_bar_item_icon{
        img{
            width: 1.2rem;
            height: 1.2rem;
        }
    }
    .tab_bar_item_title{
        font-size: 0.6rem;
        color:black;
    }
    .tab_bar_item_title_active{
        font-size: 0.6rem;
        color: #d81e06;
    }
</style>